<template>
  <div class="code-box">
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode3">
        <div class="public-title-bold">新增编辑模板页(不带地图)</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div v-show="islook3">
        <addNorm></addNorm>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode1">
        <div class="public-title-bold">新增编辑模板页(不带地图)代码展示HTML</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook1">
        <v-md-preview :text="addNordhtmlCodeHtml" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode6">
        <div class="public-title-bold">新增编辑模板页(不带地图)代码展示Css</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook6">
        <v-md-preview :text="addNordhtmlCodeCss" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode7">
        <div class="public-title-bold">新增编辑模板页(不带地图)代码展示TypeScript</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook7">
        <v-md-preview :text="addNordhtmlCodeTypeScript" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode4">
        <div class="public-title-bold">新增编辑模板页</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div v-show="islook4">
        <addPage></addPage>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode2">
        <div class="public-title-bold">新增编辑模板页代码展示Html</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook2">
        <v-md-preview :text="addPagehtmlCodeHtml" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode8">
        <div class="public-title-bold">新增编辑模板页代码展示Css</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook8">
        <v-md-preview :text="addPagehtmlCodeCss" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode9">
        <div class="public-title-bold">新增编辑模板页代码展示TypeScript</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook9">
        <v-md-preview :text="addPagehtmlCodeTypescript" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
    <div class="public-flex-box">
      <div class="public-code-icon" @click="lookCode5">
        <div class="public-title-bold">备注</div>
        <img :src="imgsrc1" alt="" />
      </div>
      <div class="public-code-con" v-if="islook5">
        <v-md-preview :text="notes" preview-class="vuepress-markdown-body"></v-md-preview>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import addNorm from './components/addNorm.vue'
import addPage from './components/addPage.vue'
import addNordhtmlCodeHtml from './addNordhtmlCodeHtml.md?raw'
import addNordhtmlCodeCss from './addNordhtmlCodeCss.md?raw'
import addNordhtmlCodeTypeScript from './addNordhtmlCodeTypeScript.md?raw'
import addPagehtmlCodeHtml from './addPagehtmlCodeHtml.md?raw'
import addPagehtmlCodeCss from './addPagehtmlCodeCss.md?raw'
import addPagehtmlCodeTypescript from './addPagehtmlCodeTypescript.md?raw'
import notes from './notes.md?raw'



const imgsrc1 = ref(
  "https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg"
);
let islook1 = ref(false);
const lookCode1 = () => {
  islook1.value = !islook1.value
}
let islook2 = ref(false);
const lookCode2 = () => {
  islook2.value = !islook2.value
}
let islook3 = ref(true);
const lookCode3 = () => {
  islook3.value = !islook3.value
}
let islook4 = ref(true);
const lookCode4 = () => {
  islook4.value = !islook4.value
}
let islook5 = ref(false);
const lookCode5 = () => {
  islook5.value = !islook5.value
}
let islook6 = ref(false);
const lookCode6 = () => {
  islook6.value = !islook6.value
}
let islook7 = ref(false);
const lookCode7 = () => {
  islook7.value = !islook7.value
}
let islook8 = ref(false);
const lookCode8 = () => {
  islook8.value = !islook8.value
}
let islook9 = ref(false);
const lookCode9 = () => {
  islook9.value = !islook9.value
}

</script>

<style lang="scss" scoped>
.code-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>